<template>
  <!-- 中国地图图表 -->
  <div class="box-echart">
    <el-row :gutter="10" style="margin:0.1rem 0;">
      <el-col :span="8" style="text-align:right;">
        <span>统计类型</span>
        <el-select style="width: 1.5rem;" v-model="selectType" placeholder="请选择">
          <el-option
            v-for="item in types"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <el-select v-model="selectProvince" filterable  placeholder="全部省" clearable @change="provinceChange">
          <el-option
            v-for="item in provinces"
            :key="item.value"
            :label="item.label"
            :value="item">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <el-select v-model="selectCity" filterable  placeholder="全部市" clearable @change="cityChange">
          <el-option
            v-for="item in citys"
            :key="item.value"
            :label="item.label"
            :value="item">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6" v-if="false">
        <el-select v-model="selectArea" placeholder="全部区"  multiple collapse-tags clearable @change="areaChange">
          <el-option
            v-for="item in areas"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      
    </el-row>
    <div v-show="!noData" class="chart" ref="chartDom"></div>
    <div v-show="noData" class="chart nodata">暂无数据</div>
  </div>
</template>
<script>
let vm;
import citysJson from "@/../static/citys.json";
export default {
  components: {},
  data() {
    return {
      _chart:null,
      //省
      provinces: citysJson,
      selectProvince: '',
      _selectProvinceObj:null,
      //市
      citys: [],
      selectCity: '',
      //区
      areas: [],
      selectArea: [],
      //类型
      types: [{
        value: '1',
        label: '校区数量'
      }],
      selectType: '1',
      searchParam:{
        provinceCodes:[],
        cityCodes:[],
        areaCodes:[],
        startTime:null,
        endTime:null,
      },
      noData:false,
    };
  },
  methods: {
    /**创建柱状图 */
    loadChart(data) {
      var rem = window.rem;
      if (!this._chart) {
        this._chart = window.$echarts.init(this.$refs.chartDom);
        this.dbclickHandle(this._chart);
      }
      let chart = this._chart;
      let xdata = [],sdata = [];
      this.noData=false;
      if (!data || data.length == 0) {
        this.noData=true;
        return;
      }
      let unit = '单位';
      for (let i = data.length-1; i >=0; i--) {
        let row = data[i];
        let xname = row["name"] || "";
        xdata.push(xname);
        sdata.push(row["value"]);
      }
      let dataZoom=null;
      if(xdata.length>17){
        dataZoom=[{
          type: 'slider',
          show: true,
          yAxisIndex: [0],
          top: 0.1*rem,
          bottom: 0.4*rem,
          left: 7.28*rem,
          right : 0.1*rem,
          startValue: 0,
          endValue: 17, //初始化滚动条
          minValueSpan : 17,
          maxValueSpan : 17,
          showDetail : false,
          showDataShadow : false,
          // backgroundColor : "red",
          fillerColor : "#9092984d",
          borderColor : "#DCDFE6",
          handleStyle : {
            opacity : 0
          }
        }];
      }
      let option = {
        grid: {
          left: 0.26 * rem,
          top: 0.16 * rem,
          bottom: 0.36 * rem,
          right: 0.46 * rem,
          containLabel: true
        },
        xAxis: {
          type: "value",
          z: 2,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#333333",
              width: 0.01 * rem
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            // interval:0,
            fontSize: 0.12 * rem,
            color: "#333333",
            fontWeight: "normal",
            inside: false,
            show: true
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#eeeeee",
              width: 0.01 * rem
            }
          },
          minInterval: 1,
        },
        yAxis: {
          type: "category",
          z:1,
          data: xdata,
          axisLabel: {
            color: "#666666",
            fontSize: 0.12 * rem,
            fontWeight: "normal"
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#333333",
              width: 0.02 * rem
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          minInterval: 1,
        },
        tooltip: {
          // trigger:'axis'
        },
        dataZoom: dataZoom,
        series: [
          {
            data: sdata,
            type: "bar",
            itemStyle: {
              color: "rgb(76,132,255)",
              barBorderRadius: [0,0.1 * rem, 0.1 * rem, 0]
            },
            label: {
              show: true,
              color: "rgb(76,132,255)",
              fontWeight: "normal",
              position: "right",
              // distance: 1.5 * rem,
              // align: "left",
              verticalAlign: "middle",
              // rotate: -90,
              formatter: "{c}",
              fontSize: 0.14 * rem
            },
            emphasis: {
              label: {
                show: false,
                color: "#333333",
                fontWeight: "bold"
              },
              itemStyle: {
                color: "rgb(255,210,69)",
                barBorderRadius: [0.1 * rem, 0.1 * rem, 0, 0]
              }
            },
            barMaxWidth: 0.5 * rem,
            z:2
          }
        ]
      };
      chart.clear();
      chart.setOption(option, true);
      this._chart = chart;
    },
    dbclickHandle(chart){
      // 处理点击事件
      chart.on('dblclick', function (params) {
        // console.log(params)
        if(params&&params.componentType=="series"&&params.componentSubType=="bar"){
          let name=params.name;
          if(vm.selectProvince&&vm.selectCity)return;
          if(!vm.selectProvince){
            let province=vm.getProvinceDataByName(name);
            vm.setSelectProvince(province);
          }
          else{
            let city=vm.getCityDataByName(vm.selectProvince,name);
            vm.setSelectCity(city);
          }
        }
      });
    },
    search(){
      api.queryCampusNumByArea(this.searchParam).then(function(data){
        if(data.resultCode==2000){
          let res=[];
          data.list.forEach(ele=>{
            if(ele.areaName||ele.cityName||ele.provinceName)
              res.push({
                name:ele.areaName||ele.cityName||ele.provinceName,
                value:ele.totalValue
              })
          });
          vm.loadChart(res);
        }
      });
    },
    setSelectProvince(param){
      this.selectProvince=param;
      this.provinceChange(this.selectProvince);
    },
    provinceChange(val){
      this.$emit('provinceChange',val?val.value:null);
      this.areas=[];
      this.selectArea=[];
      if(!val){
        this.citys=[];
        this.selectCity='';

        this.searchParam.provinceCodes=[];
        this.searchParam.cityCodes=[];
        this.searchParam.areaCodes=[];
        this.search();

        return;
      }
      this.citys=val.children;
      this.selectCity='';

      this.searchParam.provinceCodes=[val.value];
      this.searchParam.cityCodes=[];
      this.searchParam.areaCodes=[];
      this.search();

    },
    setSelectCity(param){
      this.selectCity=param;
      this.cityChange(this.selectCity);
    },
    cityChange(val){
      this.$emit('cityChange',[this.searchParam.provinceCodes[0],val?val.value:null]);
      if(!val){
        this.areas=[];
        this.areas=[];
        this.selectArea=[];

        this.searchParam.cityCodes=[];
        this.searchParam.areaCodes=[];
        this.search();
        return;
      }
      this.areas=val.children;
      this.selectArea=[];

      this.searchParam.cityCodes=[val.value];
      this.searchParam.areaCodes=[];
      this.search();
    },
    areaChange(val){
      this.searchParam.areaCodes=val;
      this.search();
    },
    getProvinceDataByName(name){
      let length=citysJson.length;
      for(let i=0;i<length;i++){
        if(citysJson[i].label==name){
          return citysJson[i];
        }
      }
      return null;
    },
    getCityDataByName(province,name){
      let length=province.children.length;
      for(let i=0;i<length;i++){
        if(province.children[i].label==name){
          return province.children[i];
        }
      }
      return null; 
    },
  },
  mounted() {
    vm = this;
    this.search();
  },
  computed: {},
  watch: {}
};
</script>
<style lang="scss" scoped>
.box-echart {
  font-size: 0.16rem;
  width: 100%;
  height: 100%;
  .head{
    width: 100%;
    height: 10%;
  }
  .chart{
    width: 100%;
    height: 90%;
  }
  .chart.nodata{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.16rem;
    color: #666666;
  }
}
</style>
<style lang="scss" >
</style>
